<template>
  <div class="user_edit">
    <el-card class="box-card">
      <div class="title">
        <span>修改用户</span>
      </div>
      <div class="detail">
        <el-form :model="edit" :rules="rules" ref="ruleForm" label-width="auto">
          <el-row>
            <el-col :span="12">
              <el-form-item label="公司名称" prop="company_name">
                <el-input
                  v-model="edit.company_name"
                  clearable
                  style="width: 93%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="edit.username" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="edit.nickname" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="edit.password"
                  clearable
                  show-password
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系手机" prop="telphone">
                <el-input v-model="edit.telphone" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="edit.email" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn">
          <el-button icon="el-icon-arrow-left" @click="back">返回</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="margin-left: 50px"
            >提交<i class="el-icon-upload el-icon--right"></i
          ></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "User_Edit",
  inject: ["userRefresh"],
  props: ["userData"],
  data() {
    return {
      edit: {
        user_id: 1,
        company_name: "",
        username: "",
        nickname: "",
        telphone: "",
        email: "",
        status: false,
        admin: false,
        user_create_time: "",
        user_modify_time: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        telphone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
    };
  },
  mounted() {
    const id = this.$route.params.id;
    let result = this.userData.find((item) => {
      if (item.user_id == id) {
        return item;
      }
    });
    this.edit = result;
  },
  methods: {
    back() {
      this.$store.commit("maskStatus_change", false);
      this.$router.go(-1);
    },
    //提交修改信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            userId: this.edit.user_id,
            user: {
              org_id: 1,
              username: this.edit.username,
              password: "123456",
              nickname: this.edit.nickname,
              telphone: this.edit.telphone,
              email: this.edit.email,
            },
          };
          this.axios
            .post("/user/changeInfo", data, {
              "Content-Type": "application/json",
            })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.back();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((err) => {
              console.error(err);
              this.$message.error("修改用户信息失败");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.box-card {
  position: absolute;
  left: 30%;
  top: 15%;
  width: 880px;
  height: 480px;
  z-index: 999;
}
.title {
  width: 95%;
  height: 5vh;
  padding: 0 0 0 30px;
  line-height: 3vh;
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  border-bottom: 1px dashed #c4c6c7;
}
.title span {
  display: inline-block;
  width: 80%;
  height: 55%;
  padding: 0px 20px;
  border-left: 5px solid #3b83cc;
}
.detail {
  margin: 50px auto;
  width: 80%;
}

.detail /deep/ .el-form-item__label {
  font-weight: 550;
}
.detail /deep/ .el-input {
  width: 85%;
}
.detail /deep/ .el-form-item__error {
  margin-left: 8%;
}
.detail /deep/ .el-row {
  margin-top: 20px;
}
.btn {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, 0);
  margin-bottom: 0;
}
</style>